<!-- 粒子背景动画 -->
<script setup>
import {reactive} from "vue";
import { loadFull } from "tsparticles"

const options = reactive({
 fpsLimit: 60,
 interactivity: {
  events: {
   onClick: {
    enable: true,
    mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。
   },
   onHover: {
    enable: true,
    mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。
   },
   resize: true
  },
  modes: {
   bubble: {
    distance: 400,
    duration: 2,
    opacity: 0.8,
    size: 40
   },
   push: {
    quantity: 4
   },
   repulse: {
    distance: 200,
    duration: 0.4
   }
  }
 },
 particles: {
  color: {
   value: '#ffffff'
  },
  links: {
   color: '#ffffff', // '#dedede'。线条颜色。
   distance: 150, // 线条长度
   enable: true, // 是否有线条
   opacity: 0.2, // 线条透明度。
   width: 1 // 线条宽度。
  },
  collisions: {
   enable: false
  },
  move: {
   direction: 'none',
   enable: true,
   outMode: 'bounce',
   random: false,
   speed: 4, // 粒子运动速度。
   straight: false
  },
  number: {
   density: {
    enable: true,
    area: 800
   },
   value: 25 // 粒子数量。
  },
  opacity: {
   value: 0.3 // 粒子透明度。
  },
  shape: {
   type: 'circle' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
  },
  size: {
   random: true,
   value: 5
  }
 },
 detectRetina: true
})

const particlesInit = async (engine) => {
 await loadFull(engine)
}

const particlesLoaded = async (container) => {
 console.log('Particles container loaded', container)
}
</script>

<template>
 <Particles
  id="tsparticles"
  :particlesInit="particlesInit"
  :particlesLoaded="particlesLoaded"
  :options="options"
 />
</template>

<style scoped lang="scss">
.Particles {
 position: fixed;
 width: 100vw;
 height: 100vh;
 z-index: 0;
}
</style>